<template>
  <div class="address">
    <div class="text">
      <div class="none" v-if="!showAddress">
        您需要先添加收货地址才可提交订单。
      </div>
      <ul v-if="showAddress">
        <li>
          <span>收<i />货<i />人：</span>{{ showAddress.receiver }}
        </li>
        <li>
          <span>联系方式：</span
          >{{ showAddress.contact.replace(/^(\d{3})\d{4}(\d{3})/, "$1****$2") }}
        </li>
        <li>
          <span>收货地址：</span>{{ showAddress.fullLocation
          }}{{ showAddress.address }}{{ showAddress.addressTags }}
        </li>
      </ul>
    
      <a href="javascript:;" v-if="showAddress" @click="addAddress(showAddress)"
        >修改地址</a
      >
    </div>
    <div class="action">
      <XtxButton class="btn" @click="visibleDialog = true">切换地址</XtxButton>
      <XtxButton class="btn" @click="addAddress({})">添加地址</XtxButton>
    </div>
    <!-- v-model:visible="visibleDialog"  visible接收值，visibleDialog传值-->
    <XtxDialog title="更换地址" v-model:visible="visibleDialog">
      <template v-if="list.length">
      <div
        class="text item"
        v-for="item in list"
        :key="item.id"
        @click="selectedAddress(item)"
        :class="{ active: currendSelect && currendSelect.id === item.id }"
      >
        <ul>
          <li>
            <span>收<i />货<i />人：</span>{{ item.receiver }}
          </li>
          <li><span>联系方式：</span>{{ item.contact }}</li>
          <li>
            <span>收货地址：</span
            >{{ item.fullLocation.replace(/ /g, "") + item.address }}
          </li>
        </ul>
      </div>
      </template>
      <template v-else>请添加地址</template>
      <template v-slot:footer>
        <XtxButton type="gray" style="margin-right: 20px" @click="cancelBt"
          >取消</XtxButton
        >
        <XtxButton type="primary" @click="confirmBt()">确认</XtxButton>
      </template>
    </XtxDialog>
    <addressEdit ref="getAddressEdit" @on-success='successHandler'/>
  </div>
</template>

<script>
import { ref } from "vue";
// import { XtxDialog } from "@/components/library/xit.dialog.vue";
import addressEdit from "./address-edit.vue"
export default {
  name: "CheckoutAddress",
  components: {
    addressEdit
  },
  props: {
    list: {
      type: Array,
      default: () => {},
    },
  },
  setup(props, { emit }) {
    const showAddress = ref(null);
    const defaultAddress = props.list.find((item) => item.isDefault === 0);
    if (defaultAddress) {
      showAddress.value = defaultAddress;
    } else {
      if (props.list.length) {
        showAddress.value = props.list[0];
      }
    }
    const visibleDialog = ref(false);
    //给父组件传地址id
    emit("change", showAddress.value && showAddress.value.id);
    //记录当前选中地址id
    const currendSelect = ref(null);
    const selectedAddress = (address) => {
      console.log(address);
      currendSelect.value = address;
    };
    //点击确定按钮
    const confirmBt = () => {
      showAddress.value = currendSelect.value;
      //es6如果currendSelect有value值，再拿id值
      emit("change", currendSelect.value?.id);

      visibleDialog.value = false;
      currendSelect.value = null;
    };
    //点击取消按钮
    const cancelBt = () => {
      visibleDialog.value = false;
      currendSelect.value = null;
    };
    const getAddressEdit=ref(null)
    const addAddress=(data)=>{
      console.log(data);
      if(data.id){
        getAddressEdit.value.open(data)
      }else{
          console.log(getAddressEdit.value);
      getAddressEdit.value.open()
      }
    
    }
    const successHandler=(formDate)=>{
      const address=props.list.find(item=>item.id===formDate.id)
  if(address){
    for (const key in address) {
     address[key]=formDate[key]
    }
  }else{
    //添加数据往列表中追加
     console.log(1111);
      const json=JSON.stringify(formDate)
      props.list.unshift(JSON.parse(json))

  }
      
     
    }
    return {
      showAddress,
      defaultAddress,
      visibleDialog,
      selectedAddress,
      currendSelect,
      confirmBt,
      cancelBt,
      getAddressEdit,
      addAddress,
      successHandler
    };
  },
};
</script>

<style lang='less' scoped>
.address {
  .xtx-dialog {
    .text {
      flex: 1;
      min-height: 90px;
      display: flex;
      align-items: center;

      &.item {
        border: 1px solid #f5f5f5;
        margin-bottom: 10px;
        cursor: pointer;
        &.active,
        &:hover {
          border-color: @xtxColor;
          background: lighten(@xtxColor, 50%);
        }
        > ul {
          padding: 10px;
          font-size: 14px;
          line-height: 30px;
        }
      }
    }
  }
  border: 1px solid #f5f5f5;
  display: flex;
  align-items: center;
  .text {
    flex: 1;
    min-height: 90px;
    display: flex;
    align-items: center;
    .none {
      line-height: 90px;
      color: #999;
      text-align: center;
      width: 100%;
    }
    > ul {
      flex: 1;
      padding: 20px;
      li {
        line-height: 30px;
        span {
          color: #999;
          margin-right: 5px;
          > i {
            width: 0.5em;
            display: inline-block;
          }
        }
      }
    }
    > a {
      color: @xtxColor;
      width: 160px;
      text-align: center;
      height: 90px;
      line-height: 90px;
      border-right: 1px solid #f5f5f5;
    }
  }
  .action {
    width: 420px;
    text-align: center;
    .btn {
      width: 140px;
      height: 46px;
      line-height: 44px;
      font-size: 14px;
      &:first-child {
        margin-right: 10px;
      }
    }
  }
}
</style>